<head>
    <link rel="stylesheet" href="./atlas.css">

</head>

<body>
    <div class="background" style="background: url(../../original_ill/996.李化禹.png) no-repeat; background-size: cover;">
        <img src="../../original_ill/ill/996.李化禹.png" alt="曲绘-模糊">
    </div>
    <div class="big-box">
        <div class="box">
            <div class="info-box">
                <div class="name-box">
                    <div class="song">
                        <p name="pvis">{{song}}</p>
                    </div>
                    <div class="composer">
                        <p name="pvis">{{composer}}</p>
                    </div>
                </div>
                <div class="charts-box">
                    <div class="length">
                        <p>{{length}}</p>
                    </div>
                    <div class="txt">
                        <div class="sqrt">
                            <p>SONG'S_INFO</p>
                        </div>
                        <div class="line">
                            <p id="other-info">aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                        </div>
                    </div>
                    <div class="chart">
                        <div class="rankbkg">
                            <div class="sqr"></div>
                            <div class="sqr rank-ez"></div>
                            <div class="sqr rank-hd"></div>
                            <div class="sqr rank-in"></div>
                            <div class="sqr rank-at"></div>
                        </div>
                        <div class="rank">
                            <p>\</p>
                            <p>EZ</p>
                            <p>HD</p>
                            <p>IN</p>
                            <p>AT</p>
                        </div>
                        <div class="note-box">
                            <p>Difficulty</p>
                            <p>14.0</p>
                            <p>14.0</p>
                            <p>14.0</p>
                            <p>14.0</p>
                        </div>
                        <div class="rank-box">
                            <div class="charter">
                                <p>Charter</p>
                            </div>
                            <div class="chart-info">
                                <p>Tap</p>
                                <p>Drag</p>
                                <p>Hold</p>
                                <p>Flick</p>
                            </div>
                            <div class="charter">
                                <p name="pvis">Barbarianerman, Main theme within the somnium</p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                            <div class="charter">
                                <p>Barbarianerman & NerSAN in the ICU</p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                            <div class="charter">
                                <p>Barbarianerman & NerSAN in the ICU</p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                            <div class="charter">
                                <p>Barbarianerman & NerSAN in the ICU</p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                        </div>
                        <div class="note-box">
                            <p>Total</p>
                            <p>4000</p>
                            <p>4000</p>
                            <p>4000</p>
                            <p>4000</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ill-box">
                <img src="../../original_ill/ill/996.李化禹.png" alt="曲绘">
            </div>
        </div>
        <div class="other-info">
            <div class="other-box">
                <div class="title">
                    <p>BPM</p>
                </div>
                <div class="dcr">
                    <p>180</p>
                </div>
            </div>
            <div class="other-box">
                <div class="title">
                    <p>Illustrator</p>
                </div>
                <div class="dcr">
                    <p>李化禹</p>
                </div>
            </div>
            <div class="other-box">
                <div class="title">
                    <p>Chapter</p>
                </div>
                <div class="dcr">
                    <p>Chapter Legacy 过去的章节</p>
                </div>
            </div>
        </div>
        <div class="leave">
            <div class="leave-box">
                <div class="leave-ez">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div class="leave-hd">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div class="leave-in">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div class="leave-at">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div class="leave-sp" style="background-color: rgb(0, 255, 149);">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="createdbox">
        <div class="phi-plugin">
            <p>{{_plugin}}</p>
        </div>
        <div class="ver">
            <p>{{Version.ver}}</p>
        </div>
    </div>

    <!-- 曲目名称自适应name-box的宽度 -->
    <script>
        function adjustFontSize() {
            //获取p元素
            var a = document.getElementsByName('pvis')
            for (var i = 0; i < a.length; ++i) {

                const songName = a[i]

                if (!songName) continue


                /*调整曲目名称字体大小*/
                var parentElement = songName.parentElement

                // var maxFontSize = 100 //设置最大字体大小

                // //如果字体宽度小于父元素宽度，则增大字体大小
                // while (songName.scrollWidth < parentElement.offsetWidth && songName.scrollHeight < parentElement.offsetHeight) {
                //     var style = window.getComputedStyle(songName, null).getPropertyValue('font-size')
                //     var fontSize = parseFloat(style)

                //     //检查是否已经达到最大字体大小
                //     if (fontSize >= maxFontSize) {
                //         break
                //     }

                //     songName.style.fontSize = (fontSize + 1) + "px"
                // }

                // 如果字体宽度大于父元素宽度，则减小字体大小
                while (songName.scrollWidth > parentElement.offsetWidth || songName.scrollHeight > parentElement.offsetHeight) {
                    var style = window.getComputedStyle(songName, null).getPropertyValue('font-size')
                    var fontSize = parseFloat(style);
                    songName.style.fontSize = (fontSize - 1) + "px";
                }
            }
        }
        window.onload = adjustFontSize
        window.onresize = adjustFontSize
    </script>
</body>